<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>很简单的Blog</title>
<style>
#header {
	width: 800px;
	margin: auto;
	padding-bottom: 50px;
}
#header p {
	margin-left: 100px;
}
#blog_list {
	width: 700px;
	margin: auto;
}
.blog_summary {
	margin-bottom: 50px;
	padding: 50px;
	box-shadow: 3px 3px 8px 3px #031240;
	text-indent:2em;
	line-height: 162%;
	background-color: #FFFFFA;
}
.float-left {
	float: left;
}
.float-right {
	float: right;
}
#list_nav {
	position: fixed;
	width: 90%;
	padding-left: 4%;
	padding-right: 6%;
	bottom: 0px;
	height: 50px;
	font-weight: bold;
	font-size: 20px;
	opacity: 0.8;
}
.button {
	padding: 4px;
	background-color: #00B44E;
	text-decoration: none;
	color: #FFF;
	border-radius: 8px;
}
.blog_time {
	color: #565656;
	font-weight: bold;
	font-size: 14px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>

<div id="header">
	<h1>老雷的实验室</h1>
	<p>
		人因梦想而伟大。
	</p>
</div>

<div id="blog_list">
	Blog列表
</div>

<div id="list_nav">
	<div class="float-left">
		<a class="button" href="#" onclick="changePage(-1);">上一页</a>
	</div>
	<div class="float-right">
	<a class="button" href="#" onclick="changePage(1);">下一页</a>
	</div>
</div>

</body>
<script>
$(function() {
	$(document).ready(function () {
		getList(1);
	});
});

var blog = {};

// 取文章列表
function getList(p) {
	if (!p)	p = 1;
	$.getJSON('$list.js', {p:p}, function (d) {
		if (d.error) {
			$('#blog_list').html(d.error);
		}
		else if (d.resoult.length < 1) {
			$('#blog_list').html('没有了~~');
		}
		else {
			blog.thisPage = p;
			$('#blog_list').html('');
			for (i in d.resoult) {
				var html = getSummary(d.resoult[i]);
				$('#blog_list').append(html);
			}
			registerBlogEvent();
		}
	});
}

// 生成文章摘要信息
function getSummary(a) {
	return '<div class="blog_summary"><h2>' + a.title + '</h2>' +
		'<span class="blog_time">最后修改时间：' + getTimeString(a.last_modified * 1000) + '</span>' +
		'<p class="blog_body">' + a.body + '</p></div>';
}

// 生成时间文本
function getTimeString(ts) {
	var t = new Date(ts);
	return t.getFullYear() + '/' + t.getMonth() + '/' + t.getDay() + ' ' + t.getHours() + ':' + (t.getMinutes() < 10 ? '0' + t.getMinutes() : t.getMinutes());
}

// 切换文章列表页号
function changePage(p) {
	if (!blog.thisPage) {
		blog.thisPage = 1;
	}
	blog.thisPage += p;
	getList(blog.thisPage);
}

// 注册文章事件
function registerBlogEvent() {
	$('.blog_summary').click(function () {
		var $t = $(this);
		$('.blog_body_summary', $t).hide();
		$('.blog_body', $t).slideDown();
	});
}
</script>
</html>